<template>
  <el-collapse v-model="activeNames" style="padding: 0 10px">
    <el-collapse-item name="1">
      <template slot="title">
        基本配置<i class="el-icon-info" />
      </template>
      <el-form v-loading="loading" :model="formData" label-width="100px" :size="formSize">
        <el-form-item label="节点id：" prop="id">
          <el-input v-model="formData.id" />
        </el-form-item>
        <el-form-item label="节点名称：" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="节点描述：" prop="documentation">
          <el-input v-model="formData.documentation" />
        </el-form-item>
      </el-form>
    </el-collapse-item>
    <el-collapse-item name="2">
      <template slot="title">
        执行监听<i class="el-icon-message-solid" />
      </template>
      <el-button type="success" :size="formSize" @click="btnAddListener('ExecutionListenerDialog')">添加</el-button>
      <el-table :data="formData.executionListener" :size="formSize" fit>
        <el-table-column prop="event" label="事件" />
        <el-table-column prop="type" label="类型" :formatter="getType" />
        <el-table-column prop="value" label="值" min-width="120px" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="btnEditListener('ExecutionListenerDialog', scope.row)"
            ><span class="bpmn-link">编辑</span></el-link>
            <el-link
              type="danger"
              @click="btnDeleteListener(scope.$index, 'executionListener', 'flowable:ExecutionListener')"
            ><span class="bpmn-link">删除</span></el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-collapse-item>
    <execution-listener ref="ExecutionListenerDialog" :form-size="formSize" @saveListener="saveListener" />
  </el-collapse>
</template>

<script>
import mixinPanel from '../../utils/mixinPanel'
import ExecutionListener from './property/executionListener'
export default {
  name: 'StartEnd',
  components: { ExecutionListener },
  mixins: [mixinPanel]
}
</script>
